<template>
  <div class="channel-edit">
    <div class="wrap">
      <div class="title">
        <span>我的频道</span>
        <van-button @click="isEdit = !isEdit" plain type="danger" size="mini">{{
          isEdit ? '取消' : '编辑'
        }}</van-button>
      </div>
      <van-grid>
        <van-grid-item v-for="(item, index) in ownList" :key="item.id">
          <span @click="into(index)" :class="{active: index === value}">{{ item.name }}</span>
          <van-icon
            v-show="index != 0 && isEdit"
            @click="del(item, index)"
            class="close-icon"
            name="cross"
          />
        </van-grid-item>
      </van-grid>
    </div>

    <div class="wrap">
      <div class="title">
        <span>可选频道</span>
      </div>
      <van-grid>
        <van-grid-item
          v-for="item in optList"
          :key="item.id"
          :text="item.name"
          @click="$emit('add', item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 我的频道
    ownList: {
      type: Array,
      required: true
    },
    allList: {
      type: Array,
      required: true
    },
    // 要父传递过来选中的下标
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      isEdit: false
    }
  },
  // // 此时，外面如果用v-model
  // // 相当于生成 :zz 和 @xx
  // model: {
  //   event: 'xx',
  //   prop: 'zz'
  // },
  methods: {
    into (index) {
      // 1. 要关闭弹出层
      this.$emit('update:channelShow', false)
      // 2. 要把index传递给父
      this.$emit('input', index)
    },
    // 删除的点击事件
    del (item, index) {
      // 除了删除这个元素外
      this.$emit('del', item)
      // 判断要删的下标是不是在当前下面的前面（小于）
      if (index < this.value) {
        // 还要修改下标，让下标-1
        this.$emit('input', this.value - 1)
      }
    }
  },

  computed: {
    optList () {
      /*
      // 遍历所有频道，把不在我的频道里的频道给筛选出来
      return this.allList.filter(item => {
        // 这个item如果不在我的频道里，才筛选出来，在就不筛选
        const index = this.ownList.findIndex(v => item.id === v.id)
        // 如果找不到，会得到-1，找不到就证明不在我的频道里，那我得筛选出来
        // 就意味着我要找index === -1的，不等于-1得到false，就没有筛选出来
        return index === -1
      })
      */
      return this.allList.filter(
        item => this.ownList.findIndex(v => item.id === v.id) === -1
      )
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  .wrap {
    margin-bottom: 10px;
    padding: 20px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .close-icon {
      position: absolute;
      right: 5px;
      top: 15px;
    }

    .active {
      color: red;
    }
  }
}
</style>
